<!--
 * @Date: 2023-03-11 20:41:59
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-03-12 15:43:27
 * @FilePath: \A19\frontend\src\components\RunCode\Experiment.vue
-->
<template>
    <div v-if="experiment" class="none">
        <div id="createTest" class="container">
            <div class="wrapper">
                <div class="left">
                    <div class="header">
                        {{ experiment.name }}
                    </div>
                    <List :questions="experiment.questions" :current-question="currentQuestion" :clicked="enter"></List>

                </div>
                <div class="right">
                    <div class="controllers">
                        <ElButton @click="submitExp" type="primary" plain>提交</ElButton>
                    </div>
                    <div class="form">
                        <div v-if="currentQuestion" class="ans-panel">
                            <div class="des">
                                <div class="item">
                                <div class="hint">题目描述:</div>
                                    {{ currentQuestion?.description }}
                                </div>
                                <div class="item">
                                    <div class="hint">输入样例:</div>
                                    <div class="code">
                                        {{ currentQuestion?.input }}
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="hint">输出样例:</div>
                                    <div class="code">
                                        {{ currentQuestion?.output }}
                                    </div>
                                </div>
                            </div>
                            <div class="ans">
                                <RunCode :saveCode="saveCode" :currentQuestion="currentQuestion" :answer="theAnswer" :language="experiment.language" ></RunCode>
                            </div>
                        </div>
                        <div v-else>
                            <div style="height:200px;line-height:200px">
                                选择题目答题
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <Frame>

        </Frame> -->
    </div>
    <div v-else class="none">
        <div class="none-wrapper">
         未参加本次实验
       </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, onUnmounted } from 'vue';
import { Router, useRoute, useRouter } from 'vue-router';
import { experiment } from '../../shared/types/experiments';
import { storeToRefs } from 'pinia';
import { useClientStore } from '../../pinia/stores/client';
import { codeAnswer } from '../../shared/types/userExperiments';
import mitt from '@/mitt';

const route = useRoute()
const expId = route.params.expId as string
const router = useRouter()
const { client,currentUser } = storeToRefs(useClientStore())

const experiment = ref<experiment>()
const answers = reactive(new Array<theCodeAnswer>())
const currentQuestion = ref<{
    description:string,
    input:string,
    output:string,
    score:number
}>()
const answer = ref<codeAnswer>()
const enter = (question:{
    description:string,
    input:string,
    output:string,
    score:number
},index:number)=>{ 
    saveCode()
   

    currentQuestion.value = question
    console.log(index);
    answer.value = answers[index]

    mitt.emit('clear',answer.value.code || '')
    theAnswer.msg = answer.value.output || ''
    theAnswer.stdin = answer.value.input || ''
}
const saveCode = () =>{
    if(answer.value){
        answer.value.code = theAnswer.text
        answer.value.output = theAnswer.msg
        answer.value.input = theAnswer.stdin
    }
}

const theAnswer = reactive({
    text:'',
    stdin:'',
    language:'',
    msg:''
})
// const text = ref('')
// const stdin = ref('')ret2.res
// const language = ref('')
const submitExp = async () =>{
    const ret = await client.value.callApi('Experiment/SubmintExp',{
        student:currentUser.value._id,
        experiment:expId,
        submitTime:new Date(),
        score:0,
        answers
    })
    if(ret.isSucc){
        ElMessage.success('提交成功')
        router.back()
        return
    }
}
const forceEndExp = async () =>{
    return await client.value.callApi('Experiment/SubmintExp',{
        student:currentUser.value._id,
        experiment:expId,
        submitTime:new Date(),
        score:0,
        answers
    })
}


let timerInterval:NodeJS.Timer
const timer = (endTime:Date,endTest:Function,router:Router) =>{
  let interval = setInterval(async () =>{
    if(new Date > endTime){
      //强制交卷
      clearInterval(interval)
      const ret = await endTest()
      ElMessage.error('已强制提交')
      router.back()
    }
  },1000)
  return interval
}
onMounted(async () =>{
    if(!expId){
        ElMessage.error('不存在')
        return
    }
    const ret = await client.value.callApi('Experiment/GetOneExpById',{
        expId
    })
    if(ret.isSucc){
        experiment.value = ret.res.exp
        timerInterval = timer(experiment.value.endTime,forceEndExp,router)
        theAnswer.language = experiment.value.language
        answers.push(...ret.res.exp.questions.map(() => {
            return{
                status:'yet' as "done" | "yet",
                input:'',
                code:'',
                output:'',
                getPoint:0
            }            
        }))
    }
})
onUnmounted(()=>{
  clearInterval(timerInterval)
})

interface theCodeAnswer extends codeAnswer{
    status:'done' | 'yet'
}

</script>

<style lang="less" scoped>
@fontColor: #a6a6a6;
.none{
    height: 100%;
    width: 100%;
    background-color: #f2f4f7;
    .none-wrapper{
        position: absolute;
        top: 40vh;
        bottom: 0;
        right: 0;
        left: 0;
        height: 100px;
        width: 500px;
        background-color: white;
        border-radius: 20px;
        margin:0 auto;
        color: @fontColor;
        text-align: center;
        line-height: 100px;
    }
}
.hint{
    color: @fontColor;
    font-size: 14px;
}
.item{
    // height: 40px;
    text-align: left;
    color: black;
    line-height: 40px;
    margin: 10px 0;
    .code{
    background: #f6f6f6;
    width: 50%;
    padding: 0 25px;
    border-radius: 10px;
    }
    .input{
    // padding: 0 20px;
    padding-left: 0%;
    width: 60%;
    margin-bottom: 10px;
    }
    .selection{
    // padding-left: 20px;
    height: 40px;
    }
}
.foot{
    padding-top:10px;
}

.container {
    min-width: 992px;
  height: 100%;
  width: 100%;
  background-color: #f2f4f7;
  padding: 5vh 0;
  overflow: auto;
  .wrapper {
    width: 90%;
    height: 90%;
    // background-color: aliceblue;
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .left {
      width: 22%;
      height: 100%;
      background-color: white;
      border-radius: 10px;
      position: relative;
      padding-top: 50px;

      .header{
        border-radius: 10px;
        height: 50px;
        color: #a6a6a6;
        font-size: 14px;
        text-align: left;
        line-height: 65px;
        padding: 0 20px;
        user-select: none;
        position: absolute;
        top: 0;
        left: 0;
        background: white;
      }
    }
    .right {
      width: 75%;
      height: 100%;
      // background-color: white;
      & > div {
        border-radius: 10px;
      }
      .controllers {
        height: 12%;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 30px;
        .text {
          color: @fontColor;
        }
        .el-button {
          margin-left: 20px;
        }
      }
      .form {
        position: relative;
        margin-top: 4%;
        // height: 80%;
        width: 100%;
        background-color: white;
        text-align: center;
        // line-height: 500px;
        color: @fontColor;
        padding:30px;
        .ans-panel{
            display: flex;
            .des{
                width: 50%;
                .hint{
                    color: @fontColor;
                    font-size: 14px;
                }
                .item{
                // height: 40px;
                    text-align: left;
                    color: black;
                    line-height: 40px;
                    .code{
                        width: 100%;
                    }
                    //   margin: 10px 0;
                    .input{
                        // padding: 0 20px;
                        padding-left: 0%;
                        width: 100%;
                        margin-bottom: 10px;
                    }
                    .selection{
                        // padding-left: 20px;
                        height: 40px;
                    }
                }

            }
            .ans{
                width: 50%;
                height: 600px;
            }
        }
       
        .foot{
          padding-top:10px;
        }
      }
    }
  }
}


</style>
